.like.card {
  /* 基础卡片样式 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 60px;
  height: 30px;
  padding: 0.75rem;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.6); /* 半透明背景 */
  backdrop-filter: blur(8px); /* 毛玻璃效果 */
  border: 1px solid rgba(255, 255, 255, 0.8); /* 浅色边框增强层次感 */
  border-top: 2px solid rgba(59, 130, 246, 0.8); /* 蓝色顶部标识线 */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05); /* 淡化阴影 */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;

  /* 卡片悬停效果 */
  &:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.85); /* 悬停时增加不透明度 */
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.12);
    border-top-color: #2563eb;
  }

  /* 装饰元素 */
  &::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background-color: rgba(59, 130, 246, 0.05);
    border-radius: 50%;
    z-index: 0;
  }

  /* 文字容器层级 */
  & > span {
    position: relative;
    z-index: 1;
  }

  /* 名称样式 */
  .name {
    font-size: 12px;
    font-weight: 500;
    color: #334155; /* 深灰色文字，提高可读性 */
    margin-bottom: 4px;
    display: flex;
    align-items: center;

    /* 图标 */
    &::before {
      content: '👍';
      margin-right: 4px;
      font-size: 14px;
    }
  }

  /* 数字样式 */
  .num {
    font-size: 18px;
    font-weight: 700;
    color: #1e40af; /* 深蓝色数字 */
    line-height: 1.2;
    margin: 3px 0;
    transition: color 0.3s ease;

    /* 数字悬停效果 */
    &:hover {
      color: #2563eb;
      transform: scale(1.05);
      display: inline-block;
    }
  }

  /* 趋势比较样式 */
  .compare {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 2px;
    align-self: flex-start;
    transition: all 0.3s ease;

    /* 上升趋势 */
    &:contains('+') {
      color: #166534;
      background-color: rgba(22, 163, 74, 0.1);
      border: 1px solid rgba(22, 163, 74, 0.2);

      &:hover {
        background-color: rgba(22, 163, 74, 0.15);
      }
    }

    /* 下降趋势 */
    &:not(:contains('+')):not(:empty) {
      color: #b91c1c;
      background-color: rgba(220, 38, 38, 0.1);
      border: 1px solid rgba(220, 38, 38, 0.2);

      &:hover {
        background-color: rgba(220, 38, 38, 0.15);
      }
    }
  }
}

/* 适配小屏幕 */
@media (max-width: 768px) {
  .like.card {
    width: 50px;
    height: 25px;
    padding: 0.6rem;
  }

  .num {
    font-size: 16px;
  }
}
